<!--
 * @Author: daidai
 * @Date: 2022-03-01 14:13:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:04:49
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
-->
<template>
    <Echart
            id="rightTop"
            :options="optionMine"
            class="right_top_inner"
            v-if="pageflag"
            ref="charts"
    />
    <Reacquire v-else @onclick="getData" style="line-height: 200px">
        重新获取
    </Reacquire>
</template>

<script>
import {currentGET} from "api/modules";
import {graphic} from "echarts"

export default {
    data() {
        return {
            option: {},
            pageflag: true,
            timer: null,


            optionMine:{
                title: {
                    text: 'Funnel Compare',
                    subtext: 'Fake Data',
                    left: 'left',
                    top: 'bottom'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}%'
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    top: 'center',
                    feature: {
                        dataView: { readOnly: false },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['Prod A', 'Prod B', 'Prod C', 'Prod D', 'Prod E']
                },
                series: [
                    {
                        name: 'Funnel',
                        type: 'funnel',
                        width: '40%',
                        height: '45%',
                        left: '5%',
                        top: '50%',
                        funnelAlign: 'right',
                        data: [
                            { value: 60, name: 'Prod C' },
                            { value: 30, name: 'Prod D' },
                            { value: 10, name: 'Prod E' },
                            { value: 80, name: 'Prod B' },
                            { value: 100, name: 'Prod A' }
                        ]
                    },
                    {
                        name: 'Pyramid',
                        type: 'funnel',
                        width: '40%',
                        height: '45%',
                        left: '5%',
                        top: '5%',
                        sort: 'ascending',
                        funnelAlign: 'right',
                        data: [
                            { value: 60, name: 'Prod C' },
                            { value: 30, name: 'Prod D' },
                            { value: 10, name: 'Prod E' },
                            { value: 80, name: 'Prod B' },
                            { value: 100, name: 'Prod A' }
                        ]
                    },
                    {
                        name: 'Funnel',
                        type: 'funnel',
                        width: '40%',
                        height: '45%',
                        left: '55%',
                        top: '5%',
                        funnelAlign: 'left',
                        data: [
                            { value: 60, name: 'Prod C' },
                            { value: 30, name: 'Prod D' },
                            { value: 10, name: 'Prod E' },
                            { value: 80, name: 'Prod B' },
                            { value: 100, name: 'Prod A' }
                        ]
                    },
                    {
                        name: 'Pyramid',
                        type: 'funnel',
                        width: '40%',
                        height: '45%',
                        left: '55%',
                        top: '50%',
                        sort: 'ascending',
                        funnelAlign: 'left',
                        data: [
                            { value: 60, name: 'Prod C' },
                            { value: 30, name: 'Prod D' },
                            { value: 10, name: 'Prod E' },
                            { value: 80, name: 'Prod B' },
                            { value: 100, name: 'Prod A' }
                        ]
                    }
                ]
            },


        };
    },
    created() {

    },

    mounted() {
        this.getData();
    },
    beforeDestroy() {
        this.clearData();
    },
    methods: {
        clearData() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        getData() {
            // this.pageflag = true;
            // // this.pageflag =false
            // currentGET("big4").then((res) => {
            //   if (!this.timer) {
            //     console.log("报警次数", res);
            //   }
            //   if (res.success) {
            //     this.countUserNumData = res.data;
            //     this.$nextTick(() => {
            //       this.init(res.data.dateList, res.data.numList, res.data.numList2),
            //         this.switper();
            //     });
            //   } else {
            //     this.pageflag = false;
            //     this.$Message({
            //       text: res.msg,
            //       type: "warning",
            //     });
            //   }
            // });

            currentGET("test").then((res) => {

                // console.log('test',res)
                if (res.status == 200) {
                    console.log("报警次数成功", res.data)

                } else {

                    console.log("报警次数失败", res.msg, res.data)
                    this.$Message({
                        text: res.msg,
                        type: "warning",
                    });
                }
            })


        },
        //轮询
        switper() {
            if (this.timer) {
                return;
            }
            let looper = (a) => {
                this.getData();
            };
            this.timer = setInterval(
                looper,
                this.$store.state.setting.echartsAutoTime
            );
            let myChart = this.$refs.charts.chart;
            myChart.on("mouseover", (params) => {
                this.clearData();
            });
            myChart.on("mouseout", (params) => {
                this.timer = setInterval(
                    looper,
                    this.$store.state.setting.echartsAutoTime
                );
            });
        },
        init(xData, yData, yData2) {
            this.option = {
                xAxis: {
                    type: "category",
                    data: xData,
                    boundaryGap: false, // 不留白，从原点开始
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(31,99,163,.2)",
                        },
                    },
                    axisLine: {
                        // show:false,
                        lineStyle: {
                            color: "rgba(31,99,163,.1)",
                        },
                    },
                    axisLabel: {
                        color: "#7EB7FD",
                        fontWeight: "500",
                    },
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(31,99,163,.2)",
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: "rgba(31,99,163,.1)",
                        },
                    },
                    axisLabel: {
                        color: "#7EB7FD",
                        fontWeight: "500",
                    },
                },
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "rgba(0,0,0,.6)",
                    borderColor: "rgba(147, 235, 248, .8)",
                    textStyle: {
                        color: "#FFF",
                    },
                },
                grid: {
                    //布局
                    show: true,
                    left: "10px",
                    right: "30px",
                    bottom: "10px",
                    top: "28px",
                    containLabel: true,
                    borderColor: "#1F63A3",
                },
                series: [
                    {
                        data: yData,
                        type: "line",
                        smooth: true,
                        symbol: "none", //去除点
                        name: "报警1次数",
                        color: "rgba(252,144,16,.7)",
                        areaStyle: {
                            //右，下，左，上
                            color: new graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: "rgba(252,144,16,.7)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(252,144,16,.0)",
                                    },
                                ],
                                false
                            ),
                        },
                        markPoint: {
                            data: [
                                {
                                    name: "最大值",
                                    type: "max",
                                    valueDim: "y",
                                    symbol: "rect",
                                    symbolSize: [60, 26],
                                    symbolOffset: [0, -20],
                                    itemStyle: {
                                        color: "rgba(0,0,0,0)",
                                    },
                                    label: {
                                        color: "#FC9010",
                                        backgroundColor: "rgba(252,144,16,0.1)",
                                        borderRadius: 6,
                                        padding: [7, 14],
                                        borderWidth: 0.5,
                                        borderColor: "rgba(252,144,16,.5)",
                                        formatter: "报警1：{c}",
                                    },
                                },
                                {
                                    name: "最大值",
                                    type: "max",
                                    valueDim: "y",
                                    symbol: "circle",
                                    symbolSize: 6,
                                    itemStyle: {
                                        color: "#FC9010",
                                        shadowColor: "#FC9010",
                                        shadowBlur: 8,
                                    },
                                    label: {
                                        formatter: "",
                                    },
                                },
                            ],
                        },
                    },
                    {
                        data: yData2,
                        type: "line",
                        smooth: true,
                        symbol: "none", //去除点
                        name: "报警2次数",
                        color: "rgba(9,202,243,.7)",
                        areaStyle: {
                            //右，下，左，上
                            color: new graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: "rgba(9,202,243,.7)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(9,202,243,.0)",
                                    },
                                ],
                                false
                            ),
                        },
                        markPoint: {
                            data: [
                                {
                                    name: "最大值",
                                    type: "max",
                                    valueDim: "y",
                                    symbol: "rect",
                                    symbolSize: [60, 26],
                                    symbolOffset: [0, -20],
                                    itemStyle: {
                                        color: "rgba(0,0,0,0)",
                                    },
                                    label: {
                                        color: "#09CAF3",
                                        backgroundColor: "rgba(9,202,243,0.1)",

                                        borderRadius: 6,
                                        borderColor: "rgba(9,202,243,.5)",
                                        padding: [7, 14],
                                        formatter: "报警2：{c}",
                                        borderWidth: 0.5,
                                    },
                                },
                                {
                                    name: "最大值",
                                    type: "max",
                                    valueDim: "y",
                                    symbol: "circle",
                                    symbolSize: 6,
                                    itemStyle: {
                                        color: "#09CAF3",
                                        shadowColor: "#09CAF3",
                                        shadowBlur: 8,
                                    },
                                    label: {
                                        formatter: "",
                                    },
                                },
                            ],
                        },
                    },
                ],
            };
        },
    },
};
</script>
<style lang='scss' scoped>
.right_top_inner {
  margin-top: -8px;
}
</style>